{% extends "wiki/doctype/wiki_page/templates/wiki_page.html" %}

{%- block head_include %}
{{ super() }}
{{ include_style('wiki.bundle.css') }}

{{ include_style('contributions.bundle.css') }}

{% endblock -%}


{% block page_content %}
<input class="d-none" type="text" autocomplete="off" name="limit" value="{{contributions|length}}">

<div class='contributions-header'> {{pilled_title}} </div>

<div class="frappe-card">
	<div class="table-area">
		<div class="list-jobs table-responsive">
			{% if contributions %}
			<table class="table">
				<thead class="white">
					<tr>
						<td style="width: 20%">{{ _("Status") }}</th>
						<td style="width: 30%">{{ _("Message") }}</th>
						<td style="width: 30%">{{ _("Last update on") }}</th>
						<td style="width: 20%">{{ _("Link") }}</th>
					</tr>
				</thead>
				<tbody>
					{% for j in contributions %}
					<tr>
						<td class="worker-name"><span class="indicator-pill no-margin {{j.color}}">&nbsp;&nbsp;{{
								j.status }}</span></td>
						<td>{{ j.message }}</td>
						<td>{{ j.modified }}</td>
						<td> <a class="btn btn-secondary-dark btn-xs center" href="{{ j.edit_link }}">Open Contribution</a>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
			{% else %}
			<div class="no-background-jobs">
				<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Empty State">
				<p class="text-muted">{{ _("No Contributions Made") }}</p>
			</div>
			{% endif %}

		</div>
	</div>
</div>
{% if contributions %}
<br>
<div> <button class='btn pull-right get_contributions'>More</button></div>
<br>
<br>

{% endif %}

{% endblock %}

{% block base_scripts %}
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>

{{ include_script("frappe-web.bundle.js") }}

<script>
	if (parseInt($('[name="limit"]').val()) < 10) $('.get_contributions').hide();

	$('.get_contributions').on("click", () => {
		frappe.call({
			method: "wiki.www.contributions.get_contributions",
			args: {
				start: parseInt($('[name="limit"]').val()),
				limit: 10,
			},
			callback: (response) => {
				if (response.message) {
					for (contribution of response.message.contributions) {
						$('.list-jobs tbody').append($(`	<tr>
						<td class="worker-name"><span class="indicator-pill no-margin ${contribution.color}">&nbsp;&nbsp;
							${contribution.status}</span></td>
						<td>${contribution.message}</td>
						<td>${contribution.modified}</td>
						<td> <a class="btn btn-default btn-xs center" href="${contribution.edit_link}">Open Contribution</a>
						</td>
					</tr>
				`))
					}
					$('[name="limit"]').val(parseInt($('[name="limit"]').val()) + response.message.contributions.length)
					if ($('[name="limit"]').val() % 10 !== 0) $('.get_contributions').hide();
				}
			},
			freeze: true,
		})
	});
</script>


{% endblock %}

{% block page_sidebar %}
{% endblock %}